<template>
  <div class="departments">
    <div class="content">
      <!-- 
        $emit
          子传父: (子组件触发父组件方法)
            - 在子组件标签上绑定一个方法: @子组件方法名="父组件方法名"
            - 子组件内触发父组件方法:  this.$emit('子组件方法名')

        兄弟传值
        1: 创建一个bus.js
          export default new Vue()
          Vue.prototype.$bus = new Vue()
        2. 监听
          this.$bus.$on('事件名', ()=> {...})
        3. 触发
          this.$bus.$emit('事件名', 参数值)
        4. 销毁
          this.$bus.$off('事件名')
      -->
      <TreeItem :treeObj="treeObj" :isTop="true" @getData="getData"></TreeItem>
      <hr />
      <el-tree :data="list">
        <template #default="{ data }">
          <TreeItem
            :treeObj="data"
            style="width: 100%;"
            @getData="getData"
          ></TreeItem>
        </template>
      </el-tree>
    </div>
    <Add :allDepts="allDepts"></Add>
  </div>
</template>

<script>
import { companyDepartment } from '@/api/departments'
import { changeData } from '@/utils/index'
import TreeItem from './component/treeItem'
import Add from './component/add'
export default {
  name: 'departments',
  components: {
    TreeItem,
    Add
  },
  data () {
    return {
      list: [],
      allDepts: [],
      treeObj: {
        manager: '负责人',
        id: ''
      }
    }
  },
  async created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await companyDepartment()
      this.allDepts = res.depts
      this.treeObj = { ...res.depts[0], ...this.treeObj }
      this.list = changeData(res.depts)
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  .content {
    width: 1000px;
    margin: 50px auto 0;
  }
}
</style>
